<template>
  <div class='zhanghucontainer'>
    <div class="topbanner">
      <div>
        <h3>Professional Customer Support</h3>
        <p>We have a team of experienced, efficient customer support professionals who provide 24/7 all-day service. No matter what issues you encounter during trading, you can get timely answers and assistance</p>
      </div>
    </div>
    <div class="waihuibox">
      <h3>Foreign Exchange</h3>
      <span class="hengxian"></span>
      <div class="gangganbox">
        <div>
          <p>500:1</p>
          <p>The leverage ratio is as high as 500:1</p>
        </div>
        <div>
          <p>10ms</p>
          <p>Average execution speed10ms</p>
        </div>
      </div>
      <div class="waihuiboxtitlebox">
        <p class="waihuiboxtitle">Flexible Trading Conditions</p>
        <div class="waihuiboxdesc">
          <p>The platform offers flexible leverage options, low spreads, and various account types to suit different investors' risk appetites and trading strategies. Whether you are a novice investor or an experienced trader, you can find trading conditions that suit you on the GMG platform</p>
          <!-- <p>行（GMG）报告显示，全球衍生品市场交易量已跃升至历史最高</p>
          <p>记录，日均交易量达6.6万亿美元。</p> -->
        </div>
      </div>
      <div class="tablebox">
          <table border="0">
            <thead>
              <tr>
                <th style="color:#E24737;">
                  Derivative trading
                </th>
                <th>
                  Sell
                </th>
                <th>
                  Buy
                </th>
                <th>
                  Spread
                </th>
                <th>
                  &nbsp;
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in state.list1" :key="index">
                <td>
                  <div>
                    <img :src="item.img?item.img:null" alt="">
                    <span>{{item.symbolName?item.symbolName:'--'}}</span>
                  </div>
                </td>
                <td>
                  {{item.bid?item.bid:'--'}}
                </td>
                <td>
                  {{item.ask?item.ask:'--'}}
                </td>
                <td>
                  {{item.spread?item.spread:'--'}}
                </td>
                <td>
                  <button @click="gohome('/openaccount')">Trade Now</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>
    <div class="gupiaozhishubox">
      <h3>Stock Index</h3>
      <span class="hengxian"></span>
      <div class="gupiaozhishutypebox">
        <div>
          <p>Flexible leverage</p>
        </div>
        <div>
          <p>Highly competitive spread</p>
        </div>
        <div>
          <p>Flexible warehouse trading</p>
        </div>
      </div>
      <!-- <div>
        <p class="waihuiboxtitle">Global Mainstream Stock Indices Are Readily Available, Making It The Best Choice To Resist Individual Stock Risks </p>
        <div class="waihuiboxdesc">
          <p>Precious metals, crude oil, natural gas, etc.</p>
        </div>
      </div>
      <div class="tablebox">
          <table border="0">
            <thead>
              <tr>
                <th style="color:#E24737;">
                  CFDs On Global Stock Indices
                </th>
                <th>
                  Sell
                </th>
                <th>
                  Buy
                </th>
                <th>
                  Spread
                </th>
                <th>
                  &nbsp;
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in state.list2" :key="index">
                <td>
                  <div>
                    <img :src="item.img?item.img:null" alt="">
                    <span>{{item.symbolName?item.symbolName:'--'}}</span>
                  </div>
                </td>
                <td>
                  {{item.bid?item.bid:'--'}}
                </td>
                <td>
                  {{item.ask?item.ask:'--'}}
                </td>
                <td>
                  {{item.spread?item.spread:'--'}}
                </td>
                <td>
                  <button @click="gohome('/openaccount')">Trade Now</button>
                </td>
              </tr>
            </tbody>
          </table>
          <nodata v-if="state.list2.length==0"></nodata>
        </div> -->
    </div>
    <div class="gupiaozhishubox" style="background-color:#FFF;">
      <h3>Securities And Stocks</h3>
      <span class="hengxian"></span>
      <div class="gupiaozhishutypebox zhengquantypebox">
        <div>
          <p>Real time flexible pricing</p>
        </div>
        <div>
          <p>Average execution speed of 20ms</p>
        </div>
        <div>
          <p>Leverage ratio 100:1</p>
        </div>
        <div>
          <p>No hidden fees</p>
        </div>
      </div>
      <!-- <div>
        <p class="waihuiboxtitle">Easily trade popular global stocks such as Apple, Amazon, Alibaba, etc</p>
      </div>
      <div class="tablebox">
          <table border="0">
            <thead>
              <tr>
                <th style="color:#E24737;">
                  Global Stock Index CFDs
                </th>
                <th>
                  Sell
                </th>
                <th>
                  Buy
                </th>
                <th>
                  Spread
                </th>
                <th>
                  &nbsp;
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in state.list4" :key="index">
                <td>
                  <div>
                    <img :src="item.img?item.img:null" alt="">
                    <span>{{item.symbolName?item.symbolName:'--'}}</span>
                  </div>
                </td>
                <td>
                  {{item.bid?item.bid:'--'}}
                </td>
                <td>
                  {{item.ask?item.ask:'--'}}
                </td>
                <td>
                  {{item.spread?item.spread:'--'}}
                </td>
                <td>
                  <button @click="gohome('/openaccount')">Trade Now</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div> -->
    </div>
    <Footer></Footer>
  </div>
</template>

<script lang='ts'>

  import { defineComponent, reactive, onMounted} from 'vue'
  import Footer from '@/components/footer.vue'
  import get from '@/utils/get'
  import { useRouter } from 'vue-router'
  import { getList } from '../service';
  export default defineComponent({

    name: 'PageNotFound',

    props: {},

    components: {
      Footer
    },

    setup() {
      const router = useRouter();
      const state = reactive({
        list1:[],
        list2:[],
        list4:[]
      })

      onMounted(()=>{
        getInit1()
        getInit2();
        getInit4();
      })

     const getInit1=()=>{
      getList({type:1}).then((res:any)=>{
        if(res && res.title=='success'){
          const data = get(res, 'data',[]);
          state.list1 = data;
        }
      }).catch(err=>{
        console.log(err)
      })
     }

     const getInit2=()=>{
      getList({type:2}).then((res:any)=>{
        if(res && res.title=='success'){
          const data = get(res, 'data',[]);
          state.list2 = data;
        }
      }).catch(err=>{
        console.log(err)
      })
     }

     const getInit4=()=>{
      getList({type:4}).then((res:any)=>{
        if(res && res.title=='success'){
          const data = get(res, 'data',[]);
          state.list4 = data;
        }
      }).catch(err=>{
        console.log(err)
      })
     }

     const gohome=(path:string)=>{
        router.push({
          path:path
        })
      }

      return {
        state,
        gohome
      }

    }

  })
</script>
<style lang="scss" scoped>
  @use './index';
</style>